import Vue from 'vue'
import Vuex from 'vuex'
// 按需导入api方法
import { getUserInfoAPI, getUserProfileAPI } from '../api/userAPI'

Vue.use(Vuex)
// 1定义一个initstate为一个对象
const initstate = {
  tokenInfo: {
    token: '',
    refresh_token: ''
  },
  userInfo: {},
  // 用户的简介信息
  userProfile: {}
}
// 2.直接从localstorage中获取tokeInfo
const stateStr = window.localStorage.getItem('state')
// console.log(stateStr)
// 3.把获取到的值赋值给第一步定义的空对象initstate
if (stateStr !== null) {
  initstate.tokenInfo = JSON.parse(stateStr).tokenInfo
}

// console.log(initstate)

export default new Vuex.Store({
  state: {
    tokenInfo: {
      token: '',
      refresh_token: ''
    },
    // 用户的基本信息
    userInfo: {},
    // 用户的简介信息
    userProfile: {}

  },
  // state: initstate,
  mutations: {
    updateTokenInfo (state, payload) {
      state.tokenInfo = payload
      // console.log('state中存的tokenInfo', state.tokenInfo)
      this.commit('saveStateStrage')
    },
    // 获取的token信息，存储到localStorage中
    saveStateStrage (state) {
      window.localStorage.setItem('state', JSON.stringify(state))
    },
    // 删除 vuex中的token 和localStorage中的token
    cleanTokenInfo (state) {
      state.tokenInfo = {
        token: '',
        refresh_token: ''
      }
      localStorage.removeItem('state')
    },
    // 更新userInfo
    updateUserInfo (state, payload) {
      // console.log('playload', payload)
      // 1. 把用户信息转存到 state 中
      state.userInfo = payload
      // console.log('state', state)
      // 2. 将最新的 state 对象持久化存储到本地
      this.commit('saveStateStrage')
    },
    // 清空 vuex 和本地的数据
    cleanState (state) {
      // 1. 清空 vuex 中的数据
      state.tokenInfo = {}
      state.userInfo = {}
      state.userProfile = {}

      // 2. 将清空后的 state 存储到本地
      this.commit('saveStateStrage')
    },
    // 更新 userProfile 的方法
    updateUserProfile (state, payload) {
      state.userProfile = payload
      this.commit('saveStateStrage')
    }

  },
  actions: {
    // 初始化用户信息
    async initUserInfo (ctx) {
      const { data: res } = await getUserInfoAPI()
      if (res.message === 'OK') {
        // console.log('userinfo', res)
        // console.log(ctx)
        // TODO：把数据转交给 Mutation 方法   ctx.commit('Mutation方法名')
        ctx.commit('updateUserInfo', res.data)
      }
    },
    // 初始化用户的简介信息
    async initUserProfile (ctx) {
      // 调用 API 接口
      const { data: res } = await getUserProfileAPI()
      // console.log(res)
      if (res.message === 'OK') {
        // TODO：把请求到的数据转交给 Mutation 方法   ctx.commit('Mutation方法名')
        ctx.commit('updateUserProfile', res.data)
      }
    }
  },
  modules: {},
  // 定义名为 userAvatar 的 getter 节点
  getters: {
    // 用户头像的计算属性
    userAvatar (state) {
      // 默认的头像地址
      let imgSrc = 'https://img.yzcdn.cn/vant/cat.jpeg'
      // 如果用户信息对象中包含photo属性中的值，则为imgSrc重新赋值
      if (state.userInfo.photo) {
        imgSrc = state.userInfo.photo
      }
      return imgSrc
    }
  }
})
